<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for=" (item,index) in arr " :key="index"> {{item}} -- {{index}}</li>
        </ul>

        <div>
            <button v-for="(a,b) in num" :key="a">第{{ a }} - {{b}}页</button>
        </div>

        <p>
            <span v-for="(c,d) in str" :key="d">{{ c }} ---{{d}}</span>
        </p>

        <ul>
            <li v-for="(e,f) in obj"> {{f}}是{{ e }}</li>

        </ul>


        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.user}}</td>
                </tr>
            </tbody>
        </table>

        <ul>

            <li v-for="(item,index) in nav " :key="item.id">
                <span>{{item.title}}</span>
                <ul>
                    <li v-for="(v,i) in item.children" :key="v.id">{{v.title}}</li>
                </ul>
            </li>
        </ul>

    </div>


    <script>
        new Vue({
            el: "#app",
            data() {
                return {

                    arr: [11, 22, 33, 44, 11],
                    num: 5,
                    str: "你好世界",
                    obj: {
                        name: "gao",
                        age: 18
                    },
                    list: [
                        { "id": 1, "user": "Ren" },
                        { "id": 2, "user": "Ren" },
                        { "id": 3, "user": "Ren" },
                        { "id": 4, "user": "Ren" },
                    ],

                    nav: [
                        {
                            "id": 11,
                            "title": "电脑",
                            "children": [
                                {"id":111,"title":"华硕"},
                                {"id":112,"title":"联想"},
                                {"id":113,"title":"戴尔"},
                            ]
                        },
                        {
                            "id": 22,
                            "title": "手机",
                            "children": [
                                {"id":222,"title":"oppo"},
                                {"id":223,"title":"坚果"},
                                {"id":224,"title":"摩托罗拉"},
                            ]
                        }
                    ]

                }
            }
        })

    </script>

</body>

</html>